<template>
  <div class="mg-24 width-100 answer-border keyword">
    <div class="mg-12 between">
      <strong>关键词信息：</strong>
      <img v-if="!expand" src="@/assets/expand.png" alt="" class="action" @click="expand = true" />
      <img
        v-if="expand"
        src="@/assets/collapse.png"
        alt=""
        class="action"
        @click="expand = false"
      />
    </div>
    <a-space class="keyword-list" :class="{ expand }">
      <MyTag v-for="word in keyWordList" :key="word">{{ word }}</MyTag>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import type { MainItemVo } from '@/api/type'
import { ref } from 'vue'
defineProps<Pick<MainItemVo, 'keyWordList'>>()
const expand = ref(false)
</script>

<style lang="scss" scoped>
.keyword{

  background: #f8fafc;
    margin-bottom: 8px;
}
.keyword-list {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  max-width: 100%;
  height: 46px;
  &.expand {
    height: auto;
    // flex-flow: row wrap;
  }
}


.action {
  cursor: pointer;
  width: 24px;
  height: 24px;
}
</style>
